<template>
    <div class="content">
        <div class="content-top">
            <Button type="primary" @click="openDetail">查看报关企业详情</Button>
            <Button type="default" @click="getApply">发起委托申请</Button>
            <Button type="default" @click="getProtocol">发起委托协议</Button>
        </div>
        <div class="content-body">
            <Table highlight-row ref="table" :columns="columns" :data="dataList" @on-selection-change="selectChange">
                中国报关协会会
                是否存在委托关系
                <template slot-scope="{ row }" slot="goodCustomsBroker">
                    {{ row.goodCustomsBroker | isFmt }}
                </template>
                <template slot-scope="{ row }" slot="ccbaMember">
                    {{ row.ccbaMember | vipFmt }}
                </template>
                <template slot-scope="{ row }" slot="customsAdminCategories">
                    {{ row.customsAdminCategories | customsFmt }}
                </template>
                <template slot-scope="{ row }" slot="clientage">
                    {{ row.clientage | isFmt }}
                </template>
            </Table>
            <Pagination
                :pageSize.sync="searchData.pageSize"
                :current.sync="searchData.pageNum"
                :total="total"
                @change="getData"
            />
        </div>
    </div>
</template>
<script>
import { queryElectList } from '@/api/basicData'
import filters from './mixins/filters'

export default {
    inject: ['nextPageReload'],
    mixins: [ filters ],
    data () {
        return {
            dataList: [],
            columns: [
                { type: 'selection', align: 'center', width: 50 },
                { title: '序号', type: 'index', align: 'center', width: 50 },
                { title: '报关企业名称', key: 'enterpriseName', align: 'center', tooltip: true },
                { title: '报关企业海关编码', key: 'enterpriseCustomsCode', align: 'center' },
                { title: '统一社会信用代码', key: 'socialCreditCode', align: 'center', width: 160 },
                { title: '登记时间', key: 'registDate', align: 'center', width: 140 },
                { title: '是否为优秀报关行', slot: 'goodCustomsBroker', align: 'center' },
                { title: '中国报关协会会员', slot: 'ccbaMember', align: 'center' },
                { title: '海关管理类型', slot: 'customsAdminCategories', align: 'center' },
                { title: '是否存在委托关系', slot: 'clientage', align: 'center' }
            ],
            total: 0,
            searchData: {
                pageNum: 1,
                pageSize: 10,
                practicalTrainingId: this.$route.params.trainingId
            }
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            queryElectList(this.searchData).then(res => {
                if (res.data.success) {
                    const { list, total } = res.data.data
                    this.dataList = list.map(item => {
                        const data = item.customsBroker || {}
                        data.clientage = item.clientage
                        return data
                    })
                    this.total = total
                    this._selected = null
                }
            })
        },
        selectChange (v) {
            this._selected = v.map(item => item.id)
        },
        checkSelected () {
            let err = ''
            if (!this._selected || this._selected.length < 1) {
                err = '请选择数据'
            } else if (this._selected.length !== 1) {
                err = '请选择一条数据'
            }
            if (err) {
                this.$Message.warning(err)
            }
            return !err
        },
        openDetail () {
            if (this.checkSelected()) {
                this.nextPageReload()
                this.$router.push({
                    name: 'electronicDetail',
                    params: {
                        id: this._selected[0]
                    }
                })
            }
        },
        getApply () {
            if (this.checkSelected()) {
                const id = this._selected[0]
                console.log(id)
            }
        },
        getProtocol () {
            if (this.checkSelected()) {
                const id = this._selected[0]
                console.log(id)
            }
        }
    }
}
</script>
